<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义箭头</title>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script>

  G6.registerEdge('line-arrow', {
    itemType: 'edge',
    draw(cfg, group) {
      const { startPoint, endPoint } = cfg
      const keyShape = group.addShape('path', {
        attrs: {
          path: [
            [ 'M', startPoint.x, startPoint.y ],
            [ 'L', endPoint.x, endPoint.y ]
          ],
          stroke: '#00F',
          lineWidth: 1,
          startArrow: {
            path: 'M 10,0 L -10,-10 L -10,10 Z',
            d: 10
          },
          endArrow: {
            path: 'M 10,0 L -10,-10 L -10,10 Z',
            d: 10
          }
        }
      });
      return keyShape
    }
  })

  const graph = new G6.Graph({
    container: 'mountNode',
    width: 800,
    height: 600,
    defaultNode: {
      size: [40, 40]
    },
    modes: {
      default: [ 'drag-node', 'drag-canvas', 'click-select' ]
    }
  });

  const data = {
    nodes: [
      {
        id: 'node1',
        label: 'node1',
        x: 500,
        y: 200,
        shape: 'rect'
      },
      {
        id: 'node2',
        label: 'node2',
        x: 300,
        y: 400,
        shape: 'rect'
      }
    ],
    edges: [
      {
        source: 'node1',
        target: 'node2',
        shape: 'line-arrow'
      }
    ]
  }

  graph.data(data)
  graph.render()
  
</script>
</body>
</html>
